var dom = document.getElementById("container");
var time=sessionStorage.getItem("time")
var times=sessionStorage.getItem("times")
var sex=sessionStorage.getItem("sex")
if(null==time||null==times||null==sex){
	location.href="/oauth2/oauth";
}
			var myChart = echarts.init(dom);
			var app = {};
			option = null;



$.ajax({

					type: "get",

					async: false, //同步执行

					url: "/wxmp/fortune/findWXMPApp",
					headers:{'Content-Type': 'application/json;application/xml;charset=utf-8;charset=gbk'}, 
					data: {birthDate:time, birthTime:times,sex:sex},
					dataType: "json", //返回数据形式为json

					success: function (result) {
					
						if(null == result){
							location.href="/oauth2/oauth";
						}

					
						var years=result.lunar_birthday
						var years1=result.calendar_birthday

						console.log(result)


					$("#xinxi").html('<img class="img" src="image/xingbie.png" style="top:80px;"><img class="img" src="image/ming.png" style="top:80px;left: 36%;"><img class="img" src="image/dog.png" style="top:80px;left: 75%;"><img class="img" src="image/a.png" style="top:140px;"><img class="img" src="image/a.png" style="top:190px;"><img class="img" src="'+result.headimgurl+'" style="width: 75px; height: 75px; border-radius: 50%;position: absolute;top:-40px;left: 39%;"><div class="xinxi" style="top:80px;left: 44%;width:100px;  text-overflow:ellipsis;overflow: hidden;white-space: nowrap;">'+result.nickname+'</div><div class="xinxi" style="top:80px;left: 14%;">'+sex+'</div><div class="xinxi" style="top:140px;left: 14%;">'+years1+'（公历）</div><div class="xinxi" style="top:190px;left: 14%;">'+years+result.lunar_birthday_time+'（农历）</div><div class="xinxi" style="top:80px;left:84%;">'+result.zodiac+'</div>');

					$("#bazi").html('<div class="text" style="font-size: 25px;color: #4e74cb;left:26%;top:45px; ">八字精批(四柱)</div><img class="img" src="image/ico1.png" style="left: 8%;top:140px;width: 25px;height: 25px"><div class="text" style="left: 7%;top:170px;color: #4c4c4c;">年柱</div><div class="text" style="left: 24%;top:120px;color:#373737;">天干:<span style="color: #656565">'+result.year_day+'（属'+result.year_day_attribute+'）</span></div><div class="text" style="left: 24%;top:180px;color:#373737;">地支:<span style="color: #656565">'+result.year_earthly+'（属'+result.year_earthly_attribute+'）</span></div><div class="text" style="right: 7%;top:150px;color:#656565">年柱带表你的祖先</div><div  style="border-top:dashed 1px #aaaaaa;position: absolute;top:230px;width: 90%;left: 5%"></div><img class="img" src="image/icon2.png" style="left: 9%;top:270px;width: 25px;height: 25px"><div class="text" style="left: 7%;top:305px;color: #4c4c4c;">月柱</div><div class="text" style="left: 24%;top:260px;color:#373737;">天干:<span style="color: #656565">'+result.month_day+'（属'+result.month_day_attribute+'）</span></div><div class="text" style="left: 24%;top:320px;color:#373737;">地支:<span style="color: #656565">'+result.month_earthly+'（属'+result.month_earthly_attribute+'）</span></div><div class="text" style="right: 7%;top:290px;color:#656565;">月柱带表你的父母</div><div style="border-top:dashed 1px #aaaaaa;position: absolute;top:370px;width: 90%;left: 5%"></div><img class="img" src="image/ico3.png" style="left:8%;top:410px;width: 25px;height: 25px;"><div class="text" style="left: 6%;top:450px;color: #4c4c4c;">日柱</div><div class="text" style="left: 24%;top:390px;color:#373737;">天干:<span style="color: #656565">'+result.day_day+'（属'+result.day_day_attribute+'）</span></div><div class="text" style="left: 24%;top:450px;color:#373737;">地支:<span style="color: #656565">'+result.day_earthly+'（属'+result.day_earthly_attribute+'）</span></div><div class="text" style="right:11%;top:420px;color:#656565;">日柱带表你自己</div><div style="border-top:dashed 1px #aaaaaa;position: absolute;top:500px;width: 90%;left: 5%"></div><img class="img" src="image/ico4.png" style="left: 8%;top:540px;width: 25px;height: 25px;"><div class="text" style="left: 6%;top:570px;color: #4c4c4c;">时柱</div><div class="text" style="left: 24%;top:520px;color:#373737;">天干:<span style="color: #656565">'+result.time_day+'（属'+result.time_day_attribute+'）</span></div><div class="text" style="left: 24%;top:580px;color:#373737;">地支:<span style="color: #656565">'+result.time_earthly+'（属'+result.time_earthly_attribute+'）</span></div><div class="text" style="right:7%;top:550px;color:#656565;">时柱带表你的后代</div><div style="border-top:dashed 1px #aaaaaa;position: absolute;top:630px;width: 90%;left: 5%"></div><div style="position: absolute;width: 100%;height: 7px;top: 670px;background-color: #eeeeee"></div><img src="'+result.day_day_attribute_url+'" style="position: absolute;top:730px;left: 29%;width: 150px;height: 150px;"><span class="text" style="top:930px;left: 37%;font-size: 17px;color:#a3a3a3;">所属五行'+result.day_day_attribute+'</span>')

					$("#dayun").html('<div class="text" style="left: 43%;top: 40px;color:#4e74cc;font-size: 25px;">大运</div><div class="text" style="width: 80%;text-align:center;left: 10%;top:100px;color: #a3a3a3">您在出生后的'+result.nian+'年'+result.yue+'个月交上大运 正处在'+result.one_luck+'大运</div> <div class="yuan" style="top:195px;"></div><div class="xian" style="top:200px"></div><div class="dayuan" style="top:240px;border:1px solid white;"></div><div class="yuan" style="top:243px;background-color: white;"></div><div class="xian" style="top:265px"></div><div class="dayuan" style="top:305px;"></div><div class="yuan" style="top:308px;"></div><div class="xian" style="top:330px"></div><div class="dayuan" style="top:370px;"></div><div class="yuan" style="top:373px;"></div><div class="xian" style="top:395px"></div><div class="dayuan" style="top:435px;"></div><div class="yuan" style="top:438px;"></div><div class="xian" style="top:460px; "></div><div class="dayuan" style="top:500px;"></div><div class="yuan" style="top:503px;"></div><div class="xian" style="top:525px"></div><div class="dayuan" style="top:565px;"></div><div class="yuan" style="top:568px;"></div><div class="xian" style="top:590px"></div><div class="dayuan" style="top:630px;"></div><div class="yuan" style="top:633px;"></div><div class="xian" style="top:655px"></div><div class="dayuan" style="top:695px;"></div><div class="yuan" style="top:698px;"></div><div class="xian" style="top:720px"></div><div class="yuan" style="top:750px;"></div><div class="nian" style="top:239px;color:white;">'+result.one_start+'年~'+result.one_end+'年</div><div class="jiao" style="top:240px;color:white;">交	</div><div class="dayun" style="top:240px;color:white;">'+result.one_luck+'大运</div><div class="yunshi" style="top:240px;color:white;">        </div><div class="hh" style="top:240px;color:white;">'+""+'</div><div class="nian" style="top:304px;">'+result.two_start+'年~'+result.two_end+'年</div><div class="jiao" style="top:305px;">交</div><div class="dayun" style="top:305px;">'+result.two_luck+'大运</div><div class="yunshi" style="top:305px;">      </div><div class="hh" style="top:305px;">'+" "+'</div><div class="nian" style="top:369px;">'+result.three_start+'年~'+result.three_end+'年</div><div class="jiao" style="top:370px;">交</div><div class="dayun" style="top:370px;">'+result.three_luck+'大运</div><div class="yunshi" style="top:370px;">     </div><div class="hh" style="top:370px;">'+""+'</div><div style="width: 86%; height: 40px;border-radius: 20px;background: linear-gradient(to right, #4f77d0 , #429bcb);position: absolute;left: 7%;top:228px;"></div><div class="nian" style="top:434px;">'+result.four_start+'年~'+result.four_end+'年</div><div class="jiao" style="top:435px;">交</div><div class="dayun" style="top:435px;">'+result.four_luck+'大运</div><div class="yunshi" style="top:435px;">     </div><div class="hh" style="top:435px;">'+" "+'</div><div class="nian" style="top:499px;">'+result.five_start+'年~'+result.five_end+'年</div><div class="jiao" style="top:499px;">交</div><div class="dayun" style="top:499px;">'+result.five_luck+'大运</div><div class="yunshi" style="top:499px;">     </div><div class="hh" style="top:499px;">'+" "+'</div><div class="nian" style="top:564px;">'+result.six_start+'年~'+result.six_end+'年</div><div class="jiao" style="top:565px;">交</div><div class="dayun" style="top:565px;">'+result.six_luck+'大运</div><div class="yunshi" style="top:565px;">      </div><div class="hh" style="top:565px;">'+" "+'</div><div class="nian" style="top:629px;">'+result.seven_start+'年~'+result.seven_end+'年</div><div class="jiao" style="top:629px;">交</div><div class="dayun" style="top:629px;">'+result.seven_luck+'大运</div><div class="yunshi" style="top:629px;">      </div><div class="hh" style="top:629px;">'+" "+'</div><div class="nian" style="top:694px;">'+result.eight_start+'年~'+result.eight_end+'年</div><div class="jiao" style="top:694px;">交</div><div class="dayun" style="top:694px;">'+result.eight_luck+'大运</div><div class="yunshi" style="top:694px;">     </div><div class="hh" style="top:694px;">'+" "+'</div><div class="text" style="width: 80%;left: 10%;top:800px;text-align: center;color: #a4a4a4;">大运对您十分重要，运势好，一路坦途，运势差，命再好也无用。</div>')


						// $("#yunshi").html('<div class="text" style="font-size: 25px;color: #4e74cc;top:40px;left: 37%;">今年运势</div><div class="wrap" style="top:150px;left: 5%"><div class="circle"><div class="percent left"></div><div class="percent right wth0"></div></div><div class="num"></div>  </div><div class="text" style="color: #4c4c4c;top:215px;left: 9%">感情</div><div class="text" style="color: #797979;top:110px;left: 25%;width: 70%;">'+result.feeling_coment+'</div><div style="border-top:dashed 1px #aaaaaa;position: absolute;top:325px;width: 90%;left: 5%"></div><div class="wrap1" style="top:410px;left: 5%;"><div class="circle1"><div class="percent1 left1 "></div>  <div class="percent1 right1 wth01"></div>  </div><div class="num1"></div>  </div> <div class="text" style="color: #4c4c4c;top:475px;left: 9%">财运</div><div class="text" style="color: #797979;top:365px;left: 25%;width:70%;">'+result.fortune_coment+'</div><div style="border-top:dashed 1px #aaaaaa;position: absolute;top:585px;width: 90%;left: 5%"></div><div class="wrap2" style="top:670px;left: 5%;">  <div class="circle2">  <div class="percent2 left2 "></div>  <div class="percent2 right2 wth02"></div>   </div><div class="num2"></div>  </div> <div class="text" style="color: #4c4c4c;top:735px;left: 9%">事业</div><div class="text" style="color: #797979;top:625px;left: 25%;width: 70%;">'+result.couse_coment+'</div><div style="border-top:dashed 1px #aaaaaa;position: absolute;top:845px;width: 90%;left: 5%"></div><div class="wrap3" style="top:930px;left: 5%;">  <div class="circle3">  <div class="percent3 left3 "></div>  <div class="percent3 right3 wth03"></div>  </div>  <div class="num3"></div>  </div> <div class="text" style="color: #4c4c4c;top:995px;left:9%">健康</div><div class="text" style="color: #797979;top:885px;left:25%;width: 70%;">'+result.healthy_coment+'</div><div style="border-top:dashed 1px #aaaaaa;position: absolute;top:1105px;width: 90%;left: 5%"></div>')


						// <div class="text" style="width: 72%;left: 14%;top: 35px;color: #656565;">'+result.proposal+'</div>
						$("#dashi").html('<div class="text" style="left: 14%;top:60px;color: #4e74cc;">想了解自己未来的各方面具体运势</div><button id="button" style="width: 60%;height: 50px;position: absolute;left: 20%;top: 110px;background:linear-gradient(to right, #4f77d0 , #429bcb);font-size: 18px;text-align: center;border-radius: 10px;border: 1px #5e35b1 ;color: white;line-height: 50px;">问</button>')

	//function fetchData(cb) {
			    //通过 setTimeout 模拟异步加载
			   // setTimeout(function () {
			    //	for(i=0;i<10;i++){
			    //		  cb({
			    //      categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
			    //        data: [i+1, i, i, i, i, i]
			    //    });
			    		
			    //	}
			      
			   // }, 1000);
			//}

			 //初始 option




			option = {
			    title: {
			        text: '运势走势图',
			        left:'center',
			        textStyle:{
			        	color:'#4e74cc',
			        	fontSize:'24',
			        	fontWeight:'normal'
			        }
			    },
			  	
			    tooltip: {},
			    legend: {
			        show:false
			    },
			    xAxis: {
			        data: [],
			        name:'年数',
			        nameLocation:'middle',
			        nameGap:-25,
			        nameTextStyle:{
			        	color:'#626262',
			        		
			        	}
			    },
			    yAxis: {
			    	name:'指数',
			    	nameTextStyle:{
			        	color:'#626262',
			        		
			        },
			        splitLine:{
			        	show:false
			        },

			    },
			    series: [{
			        name: '运势',
			        type: 'line',
			        data: [],
			        symbolSize:'5',
			        lineStyle:{
			        	normal:{
			        		type:'dashed',
			        		color:'#aaaaaa'
			        	}
			        },
			        itemStyle:{
			        	normal:{
			        		color:'black'
			        	}
			        }
			    }]
			};
			option.series[0].data.push(result.one_year_index)	
			option.series[0].data.push(result.two_year_index)
			option.series[0].data.push(result.three_year_index)
			option.series[0].data.push(result.four_year_index)
			option.series[0].data.push(result.five_year_index)
			option.series[0].data.push(result.six_year_index)
			option.series[0].data.push(result.seven_year_index)
			option.series[0].data.push(result.eight_year_index)
			option.series[0].data.push(result.nine_year_index)
			option.series[0].data.push(result.ten_year_index)
			
			
			option.xAxis.data.push(result.one_year)
			option.xAxis.data.push(result.two_year)
			option.xAxis.data.push(result.three_year)
			option.xAxis.data.push(result.four_year)
			option.xAxis.data.push(result.five_year)
			option.xAxis.data.push(result.six_year)	
			option.xAxis.data.push(result.seven_year)
			option.xAxis.data.push(result.eight_year)
			option.xAxis.data.push(result.nine_year)
			option.xAxis.data.push(result.ten_year)
			

			
	
			//fetchData(function (data) {
			//    myChart.setOption({
			 //       xAxis: {
			 //           data: data.categories
			 //       },
		    //    series: [{
		            // 根据名字对应到相应的系列
			 //           name: '销量',
			 //           data: data.data
			  //      }]
		   // });
			//});

			

			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}



					////////////////////////////////////////
	var percent=0;
    var percent1=0;
    var percent2=0; 
    var percent3=0;    
    var loading=setInterval(function(){  
        if(percent>100){  
            percent=0;  
            $('.circle').removeClass('clip-auto');  
            $('.right').addClass('wth0');  
        }else if(percent>50){  
            $('.circle').addClass('clip-auto');  
            $('.right').removeClass('wth0');  
        }  
        $('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
        $('.num').html(percent+"分")  
        percent++;  
        if(percent==result.feeling+1){
            clearInterval(loading)
        }
    },10); 
    var loading1=setInterval(function(){  
        if(percent1>100){  
            percent1=0;  
            $('.circle1').removeClass('clip-auto1');  
            $('.right1').addClass('wth01');  
        }else if(percent1>50){  
            $('.circle1').addClass('clip-auto1');  
            $('.right1').removeClass('wth01');  
        }  
        $('.left1').css("-webkit-transform","rotate("+(18/5)*percent1+"deg)");  
        $('.num1').html(percent1+"分")  
        percent1++;  
        if(percent1==result.fortune+1){
            clearInterval(loading1)
        }
    },10);  

    var loading2=setInterval(function(){  
        if(percent2>100){  
            percent2=0;  
            $('.circle2').removeClass('clip-auto2');  
            $('.right2').addClass('wth02');  
        }else if(percent2>50){  
            $('.circle2').addClass('clip-auto2');  
            $('.right2').removeClass('wth02');  
        }  
        $('.left2').css("-webkit-transform","rotate("+(18/5)*percent2+"deg)");  
        $('.num2').html(percent2+"分")  
        percent2++;  
        if(percent2==result.couse+1){
            clearInterval(loading2)
        }
    },10); 


    var loading3=setInterval(function(){  
        if(percent3>100){  
            percent3=0;  
            $('.circle3').removeClass('clip-auto3');  
            $('.right3').addClass('wth03');  
        }else if(percent3>50){  
            $('.circle3').addClass('clip-auto3');  
            $('.right3').removeClass('wth03');  
        }  
        $('.left3').css("-webkit-transform","rotate("+(18/5)*percent3+"deg)");  
        $('.num3').html(percent3+"分")  
        percent3++;  
        if(percent3==result.healthy+1){
            clearInterval(loading3)
        }
    },10);  
			




















				}
			});
		
document.getElementById("button").onclick=function(){
	location.href="wx_payment.html"
};


			//function fetchData(cb) {
			    // 通过 setTimeout 模拟异步加载
			//    setTimeout(function () {
			//        cb({
			//            categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
			//            data: [5, 20, 36, 10, 10, 20]
			 //       });
			//    }, 1000);
			//}

			// 初始 option
	